<template>
  <Card :bordered="false">
    <div style="margin-bottom: 15px" class="flex-row-center-space">
      <Button @click="back">返回</Button>
      <Button :type="'primary'" @click="handleAdd">添加</Button>
    </div>

    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <DetailModal @register="registerModal" @success="handleSuccess" />
  </Card>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import mcApi from 'mc-c2b2m-operator-api';
  import DetailModal from './detailModal.vue';
  import { Button, Card } from 'ant-design-vue';
  import { useModal } from '@/components/Modal';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
  import { detailTableColumns } from '@/views/spu/components/ladderQuotationList/data';

  const { SpuModule } = mcApi;
  const { QuotationApi } = SpuModule;

  const route = useRoute();
  const ladderQuotationListId = ref<string>('');
  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    immediate: false,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: false,
    columns: detailTableColumns,
    pagination: { pageSize: 50, defaultPageSize: 50 },
    api: QuotationApi.getLadderQuotationListItemPage,
    beforeFetch: (arg) => {
      arg.ladderQuotationListId = ladderQuotationListId.value;
    },
    actionColumn: {
      width: 150,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  onMounted(() => {
    const { id } = route.query;
    if (!id) return;
    ladderQuotationListId.value = id + '';
    reload();
  });

  const [registerModal, { openModal, closeModal }] = useModal();

  function handleAdd() {
    openModal(true, { ladderQuotationListId: ladderQuotationListId.value });
  }
  function handleEdit(record: any) {
    openModal(true, {
      record,
      ifUpdate: true,
      ladderQuotationListId: ladderQuotationListId.value,
    });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
  function back() {
    window.history.back();
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
